<template>
  <div class='search-result'>
    <van-nav-bar
      :title="keyword + '的搜索结果'"
      left-arrow
      @click-left='$router.back()'
      fixed
    ></van-nav-bar>

    <van-list
      v-model='loading'
      :finished='finished'
      finished-text='没有更多了'
      @load='onLoad'
    >
      <van-cell
        @click="$router.push('/article/' + item.art_id)"
        v-for='(item,index) in list'
        :key='index'
        :title='item.title' />
    </van-list>
  </div>
</template>

<script>
import { getSearchResult } from '@/api/search'

export default {
  name: 'Result',
  computed: {
    keyword () {
      return this.$route.query.keyword
    }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1
    }
  },
  methods: {
    async onLoad () {
      const { data: res } = await getSearchResult(this.page, this.keyword)
      // console.log(res)
      this.list = [...this.list, ...res.results]
      // 确保能加载下一页
      this.loading = false
      // 增加页码来请求下一页数据
      this.page++
      // 判断是否加载完毕
      if (res.results.length === 0) {
        this.finished = true
      }
    }
  }
}
</script>

<style scoped>

</style>
